<template>
  <div class="son-page-container" :style="{ backgroundImage: `url(${website_bg_url})` }">
    <el-container class="main-container">
      <el-header height="10vh" class="header-container">
        <MyHeader />
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="5">
            <div class="area-container menu-container">
              <div v-for="menu in menuList" :key="menu.id" class="menu-item">
                <div class="menu-title" @click="toggleSubMenu(menu)">
                  <span>{{ menu.name }}</span>
                  <i v-if="menu.children" :class="['arrow', menu.isOpen ? 'arrow-down' : 'arrow-right']"></i>
                </div>
                <div v-if="menu.children && menu.isOpen" class="sub-menu">
                  <div v-for="child in menu.children"
                       :key="child.id"
                       class="sub-menu-item"
                       :class="[{ 'disabled': (child.status === 1) }, { 'active': selectedSubMenuId === child.id }]"

                       @click="handleSubMenuClick(child)">
                    <span class="menu-name">{{ child.name }}</span>
                    <span v-if="child.tips" class="menu-tips">{{ child.tips }}</span>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="19">
            <div class="area-container right-area">
              <component :is="currentComponent" v-if="currentComponent" />
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref, shallowRef} from 'vue'
import axiosUtil from '../../axios-util/axios-util'
import {ArrowDown} from '@element-plus/icons-vue'
import NumberPerson from "../digitalHuman/NumberPerson.vue"
import NumberPersonPro from "../digitalHuman/NumberPersonPro.vue"
import NumberPersonVideo from "../digitalHuman/NumberPersonVideo.vue"
import PackageMarket from "../digitalHuman/PackageMarket.vue"
import PackageTemplate from "../digitalHuman/PackageTemplate.vue"
import PersonVoice from "../digitalHuman/PersonVoice.vue";
import MyHeader from '../common/MyHeader.vue';
import utils from '../../utils/utils'
import LocalStorageUtil from '../../utils/LocalStorageUtil'

interface MenuItem {
  id: number;
  pid: number;
  name: string;
  tips: string;
  status?: number;
  children?: MenuItem[];
  isOpen?: boolean;
}

//主题控制light  dark
const theme = utils.getTheme();
// 网站背景图
const website_bg_url = ref('')
// 网站logo
const website_logo = ref('')

const newprostatus = ref((LocalStorageUtil.get('userDetailInfo') as any).newprostatus);
const menuList = ref<MenuItem[]>([
  {
    id:1,
    pid:0,
    name:'人声克隆',
    tips:'',
    children:[
      {
        id:11,
        pid:1,
        name:'人声克隆',
        tips:'',
      }
    ]
  },{
    id:2,
    pid:0,
    name:'数字人克隆',
    tips:'',
    status:0,
    children:[
      {
        id:21,
        pid:2,
        name:'数字人形象',
        tips:'',
        status:0,
      },
      {
        id:22,
        pid:2,
        name:'数字人形象Pro',
        tips:'更快更优惠',
        status: newprostatus.value == 1 ? 0 : 1,
      },
      {
        id:23,
        pid:2,
        name:'数字人视频',
        tips:'',
        status:0,
      }
    ]
  },{
    id:3,
    pid:0,
    name:'智能包装',
    tips:'',
    status:0,
    children:[
      {
        id:31,
        pid:3,
        name:'包装模版',
        tips:'',
        status:0,
      },
      {
        id:11,
        pid:1,
        name:'包装市场',
        tips:'',
        status:1,
      }
    ]
  }
])

const openMenuId = ref(21)

const currentComponent = shallowRef(null)
const selectedSubMenuId = ref<number|null>(null)

const toggleSubMenu = (menu: MenuItem) => {
  // 关闭其他所有菜单
  menuList.value.forEach(item => {
    if (item.id !== menu.id) {
      item.isOpen = false
    }
  })
  // 切换当前菜单
  menu.isOpen = !menu.isOpen
}

const handleSubMenuClick = (child: MenuItem) => {
  if (child.status === 1) return // 如果菜单项被禁用，直接返回
  selectedSubMenuId.value = child.id
  switch (child.id) {
    case 11:
      currentComponent.value = PersonVoice
      break
    case 21:
      currentComponent.value = NumberPerson
      break
    case 22:
      currentComponent.value = NumberPersonPro
      break
    case 23:
      currentComponent.value = NumberPersonVideo
      break
    case 31:
      currentComponent.value = PackageTemplate
      break
    case 33:
      currentComponent.value = PackageMarket
      break
  }
}

onMounted(() => {
  initWebsiteBgUrl()
  document.body.classList.remove('login-page')
  // 默认打开id为21的二级菜单
  const targetMenu = menuList.value.find(menu => menu.children?.some(child => child.id === openMenuId.value))
  if (targetMenu) {
    targetMenu.isOpen = true
    handleSubMenuClick(targetMenu.children.find(child => child.id === openMenuId.value))
  }
})

//读取配置，获取网站背景图和网站logo
const initWebsiteBgUrl = async () => {
  const response = await axiosUtil.post('api/pc/site/get_agent_config', {})
  if (response.data.code === 0 && response.data.data) {
    website_bg_url.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_bg || ''
    website_logo.value = import.meta.env.VITE_APP_SERVER + response.data.data.website_logo || ''
  }
}
</script>

<style scoped>
.son-page-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.main-container {
  height: 100vh;
  width: 100%;
  backdrop-filter: blur(5px);
}

.header-container {
  padding: 0;
  width: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  backdrop-filter: blur(10px);
  border-bottom: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.1)"');
}

.el-main {
  padding: 20px;
  height: 90vh;
  overflow-x: hidden;
}

.el-row {
  height: 100%;
  margin: 0 !important;
}

.el-col {
  height: 100%;
}

.area-container {
  height: 100%;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  box-shadow: 0 4px 6px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(0, 0, 0, 0.1)"');
  transition: all 0.3s ease;
  padding: 15px;
}

.area-container:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.15)"');
  box-shadow: 0 6px 12px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.15)" : "rgba(0, 0, 0, 0.15)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
}

.menu-container {
  overflow-y: auto;
}

.menu-item {
  margin-bottom: 10px;
}

.menu-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border-radius: 4px;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"');
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-title:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  box-shadow: 0 0 10px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  transition: all 0.3s ease;
}

.arrow-right {
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff;
}

.arrow-down {
  border-width: 8px 6px 0 6px;
  border-color: #fff transparent transparent transparent;
}

.sub-menu {
  margin-top: 5px;
  margin-left: 15px;
}

.sub-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"');
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.3s ease;
  margin-bottom: 5px;
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.1)"');
  border: 1px solid v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
}

.sub-menu-item:hover {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.2)" : "rgba(255, 255, 255, 0.2)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
}

.menu-name {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.8)" : "rgba(255, 255, 255, 0.8)"');
  font-size: 0.9rem;
}

.menu-tips {
  color: #FFD700;
  font-size: 0.8rem;
  margin-left: 10px;
  padding: 2px 6px;
  background: rgba(255, 215, 0, 0.1);
  border-radius: 3px;
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.active {
  background: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  border-color: v-bind('theme === "light" ? "rgba(255, 255, 255, 0.4)" : "rgba(255, 255, 255, 0.4)"');
  box-shadow: 0 0 15px v-bind('theme === "light" ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.3)"');
  transform: translateX(5px);
  font-weight: bold;
}

.active .menu-name {
  color: v-bind('theme === "light" ? "rgba(0, 0, 0, 0.9)" : "rgba(255, 255, 255, 0.9)"');
  text-shadow: 0 0 5px v-bind('theme === "light" ? "rgba(0, 0, 0, 0.3)" : "rgba(255, 255, 255, 0.3)"');
}

.menu-container::-webkit-scrollbar {
  width: 6px;
}

.menu-container::-webkit-scrollbar-track {
  background: v-bind('theme === "light" ? "rgba(0, 51, 102, 0.2)" : "rgba(0, 51, 102, 0.2)"');
  border-radius: 3px;
}

.menu-container::-webkit-scrollbar-thumb {
  background: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.3)" : "rgba(0, 204, 255, 0.3)"');
  border-radius: 3px;
}

.menu-container::-webkit-scrollbar-thumb:hover {
  background: v-bind('theme === "light" ? "rgba(0, 204, 255, 0.5)" : "rgba(0, 204, 255, 0.5)"');
}
</style>

<style>
/* 隐藏全局背景图 */
body::before {
  display: none !important;
}

/* 优化Son页面背景图和滚动条 */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
</style>
